<template>
  <div>
    <div class="tab-title-box">
      <span class="tab-item">在学课程</span>
    </div>
    <div class="tab-content-box">
      <div class="class-ctx">
        <div
            class="class-item"
            v-for="(item, index) in course"
            :key="index"
            @click="$router.push(`/courseDetail?id=${item.id}`)">
          <img :src="item.image" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div style="text-align: center; padding: 10px 0" v-if="total>10">
        <el-pagination background layout="prev, pager, next"
                       :current-page="pageNum"
                       :page-size="pageSize"
                       :total="total"
                       @update:current-page="changePageNum"
                       @current-change="getMyCourseList"/>
      </div>
    </div>
  </div>
</template>
<script>
import { getMyCourseList } from "@/api/u/course"
import { mapState } from "vuex";
export default {
  name: "home-center",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      course: []
    };
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user }),
  },
  created() {
    this.getMyCourseList()
  },
  methods: {
    changePageNum(val){
      this.pageNum = val
    },
    // 获取我的可成
    getMyCourseList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getMyCourseList(param).then((res) => {
        this.course = res.data.list;
        this.total = res.data.total;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.tab-title-box {
  display: flex;
  height: 51px;
  line-height: 51px;
  border-bottom: 1px solid #e2e2e2;
  background: #ebeef5;
  .tab-item {
    margin-left: 40px;
    color: $theme-color-font;
    line-height: 51px;
    height: 52px;
    min-width: 65px;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 2px solid $theme-color-font;
    background: #fff;
  }
}
.tab-content-box {
  background: #fff;
  padding: 0 30px;
  .class-ctx {
    padding: 39px 0 39px 13px;
    .class-item {
      text-align: center;
      margin-bottom: 10px;
      margin-right: 20px;
      float: left;
      transition: all 0.1s;
      position: relative;
      cursor: pointer;
      width: 180px;
      padding: 0 0 10px;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: rgba(215, 219, 221, 0.5) 8px 8px 18px 0;
      img {
        width: 100%;
        height: 134px;
        margin-bottom: 10px;
      }
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover {
        -webkit-box-shadow: 0 4px 4px 1px #e0ecfb;
        box-shadow: 0 4px 4px 1px #e0ecfb;
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        background: #f5f7fa;
      }
    }
  }
}
</style>